<template>
    <div class="personage">
        <van-nav-bar title="个人信息" left-arrow @click-left="handleLeft"></van-nav-bar>
        <div class="personage_box">
            <div class="personage_box_item">
                <div class="item_left">
                    <span>头像</span>
                    <img v-if="userInfo.avatar" class="left_img" :src="userInfo.avatar" alt="">
                    <img v-else class="left_img" src="@/assets/productHome/icon_touxiang.jpeg" alt="">
                </div>
                <van-icon name="arrow" color="#B8BECA" />
            </div>
            <div class="personage_box_item">
                <div class="item_left">
                    <span>昵称</span>
                    <span>{{ userInfo.nickName || '' }}</span>
                </div>
                <van-icon name="arrow" color="#B8BECA" />
            </div>
            <div class="personage_box_item">
                <div class="item_left">
                    <span>手机号</span>
                    <span>{{ userInfo.userName }}</span>
                </div>
                <van-icon name="arrow" color="#B8BECA" />
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from "vue-router";
import { getInfo } from "@/api/supplierList/index";

const router = useRouter();
const userInfo = ref<any>({})


const getList = async () => {
    const res = await getInfo();
    userInfo.value = res.data.user;
};
getList();

const handleLeft = () => {
    router.back();
};

</script>
<style lang="less" scoped>
.personage {
    width: 100%;
    height: calc(100vh - 44px);
    background-color: #f6faff;
    box-sizing: border-box;
    overflow-y: scroll;

    .personage_box {
        padding: 10px 10px 50px;
        background: #fff;

        .personage_box_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #eee;

            .item_left {
                flex: 1;
                min-width: 0;
                margin-right: 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .left_img {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                }
            }
        }
    }
}
</style>